import React from 'react'
import '@/assets/css/OrderConfirm.scoped.css'

const Component = () =>
{
  let [AddressShow, SetAddressShow] = useState(false)
  let [CouponShow, SetCouponShow] = useState(false)
  let [PayShow, SetPayShow] = useState(false)

  //外卖信息
  let [food, SetFood] = useState({
    name: '香辣鸡腿中国汉堡+翅根+冰柠可乐',
    price: '12'
  })

  // 订单信息
  let [order, SetOrder] = useState({
    //收货地址
    mobile: '13512644556',
    address: '新港西路231号',
    addrid: '',
    //支付方式
    payment: '余额支付',
    pay: 'money',
    // 备注信息
    remark: '',
    //优惠券
    couponid:'',
    couponstr: '',
    conponrate: 0,
    //价格信息
    price: food.price,
  })

  //收货地址
  let [address, SetAddress] = useState([[
    {label: '广州市新港西路231号', mobile: '13512644556', value: '1'},
    {label: '广州市白云大道北23号', mobile: '1311653344', value: '2'},
    {label: '广州市番禺大石55号', mobile: '13412567890', value: '3'},
  ]])

  //支付信息
  let [paylist, SetPay] = useState([[
    {label: '余额支付', value: 'money'},
    {label: '微信支付', value: 'wx'},
    {label: '支付宝支付', value: 'zfb'},
  ]])

  // 优惠券
  let [coupon, SetCoupon] = useState([[
    {label: '全场优惠95折', value: 1, rate: '0.95'},
    {label: '夏季优惠75折', value: 2, rate: '0.75'},
    {label: '冬季优惠65折', value: 3, rate: '0.65'},
  ]])

  //收货地址选择方法
  const AddressChange = async (value: string[]) =>
  {
      SetAddressShow(false)

      var current = {
        mobile: '',
        address: '',
        addrid: '',
      }

      //获取picker第一项
      var list:any = address[0]

      list.map((item:any) => 
      {
        if(item.value == value[0])
        {
          current.mobile = item.mobile
          current.address = item.label
          current.addrid = value[0]
        }
      })

      SetOrder({
        ...order,
        ...current
      })
  }

  //优惠券确认
  const CouponChange = async (value: any) =>
  {
    SetCouponShow(false)

    var current = {
      couponid: '',
      couponstr: '',
      couponrate: ''
    }

    //获取picker第一项
    var list:any = coupon[0]

    list.map((item:any) => {
      if(item.value == value[0])
      {
        current.couponstr = item.label
        current.couponid = value[0]
        current.couponrate = item.rate
      }
    })

    var price:any = parseFloat(food.price) * parseFloat(current.couponrate)
    price = price.toFixed(2)

    SetOrder({
        ...order,
        ...current,
        price
    })
  }

  // 支付方式
  const PayChange = async (value:any) =>
  {
      SetPayShow(false)

      var current = {
        payment: '余额支付',
        pay: 'money'
      }

      //获取picker第一项
      var list:any = paylist[0]

      list.map((item:any) => 
      {
        if(item.value == value[0])
        {
          current.payment = item.label
          current.pay = value[0]
        }
      })
      
      SetOrder({
          ...order,
          ...current
      })
  }

  //订单备注
  const RemarkChange = (e:any) => 
  {
    SetOrder({
      ...order,
      remark:e
    })
  }

  //提交订单
  const confirm = async () =>
  {
    var result = await React.UI.Dialog.confirm({
      content: '是否确认提交订单'
    })

    if(!result)
    {
      return false
    }

    React.toast('下单成功', '/order/info')
  }

  return (
    <>
      <div className='skeleton'>
          <div className="detail">
              <div className="thumb">
                  <img src={require("@/assets/images/food1.png")} />
              </div>
              <div className="right">
                  <p>{food.name}</p>
                  <p>￥{food.price}元</p>
              </div>
          </div>

          {/* 手机号码 */}
          <div className='skeleton_price'>
            <div className="tips">手机号码</div>
            <React.UI.Input placeholder="请输入手机号码" value={order.mobile} readOnly />
          </div>

          {/* 收货地址 */}
          <div className='skeleton_rect'>
            <div className="item">
                <label>收货地址</label>
                <React.UI.Input type="text" className="item_right" placeholder="请选择收货地址" value={order.address} />
                <React.UI.Button size="mini" color="primary" onClick={() => SetAddressShow(true)}>选择</React.UI.Button>

                {/* 弹出层组件 */}
                <React.UI.Picker
                  columns={address}
                  visible={AddressShow}
                  onClose={() => SetAddressShow(false)}
                  onConfirm={AddressChange}
              >
              </React.UI.Picker>
            </div>
          </div>

          {/* 支付方式 */}
          <div className='skeleton_rect'>
            <div className="item">
                <label>支付方式</label>
                <React.UI.Input type="text" className="item_right" placeholder="支付方式" value={order.payment} readOnly />
                <React.UI.Button size="mini" color="primary" onClick={() => SetPayShow(true)}>选择</React.UI.Button>

                {/* 弹出层组件 */}
                <React.UI.Picker
                  columns={paylist}
                  visible={PayShow}
                  onClose={() => SetPayShow(false)}
                  onConfirm={PayChange}
                >
                </React.UI.Picker>
            </div>
          </div>

          {/* 优惠券 */}
          {coupon[0] && 
            <div className='skeleton_rect'>
              <div className='item'>
                <label>优惠券</label>
                <React.UI.Input type="text" className="item_right" placeholder="请选择优惠券" value={order.couponstr} readOnly />
                <React.UI.Button size="mini" color="primary" onClick={() => SetCouponShow(true)}>选择</React.UI.Button>

                {/* 弹出层 */}
                <React.UI.Picker
                  columns={coupon}
                  visible={CouponShow}
                  onClose = {() => SetCouponShow(false)}
                  onConfirm={CouponChange}
                >
                </React.UI.Picker>
              </div>              
            </div>
          }

          {/* 订单备注 */}
          <div className='skeleton_price'>
            <div className="tips">订单备注</div>
            <React.UI.Input placeholder="请输入订单备注" value={order.remark} onChange={RemarkChange} clearable />
          </div>
      </div>

      <div className="comfirm_foot-bar">
          <div className="text">
            <span>总价:</span>
            <span>￥{order.price}</span>
          </div>
          <React.UI.Button onClick={confirm} color='primary'>提交订单</React.UI.Button>
      </div>
    </>
  )
}

export default Component